import React, { useState, useEffect } from 'react'
import SearchBar from '../../components/SearchBar'
import { Table, Image, Tooltip, Button, Modal, message, Upload } from 'antd'
import { studyDelete } from '@a/nowPage'
import { fetchStudy } from '@a/endPage'
import { FolderAddOutlined, ExportOutlined, ImportOutlined } from '@ant-design/icons'
import { exportExcelTpl, writeExcel } from '@u/xlsx'
import { useNavigate } from 'react-router-dom'
import './style.scss'
export default function EndPage() {
  const navigate = useNavigate();
  // 点击搜索
  const searchParams = {
    keyWord: '',
    id: ''
  }
  const searchItem = (params) => {
    searchParams.keyWord = params.keyWord;
    searchParams.id = params.id;
    getNowStudy();
  }
  //表格
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '学生姓名',
      dataIndex: 'studyName',
      key: 'studyName'
    },
    {
      title: '学员头像',
      dataIndex: 'icon',
      render: (value, row, index) => {
        return (
          <Image width={80} src={value} />
        )
      },
      key: 'icon'
    },
    {
      title: '家长姓名',
      dataIndex: 'parentName',
      key: 'parentName'
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '费用',
      dataIndex: 'Price',
      key: 'Price'
    },
    {
      title: '备注',
      dataIndex: 'desc',
      render: (value) => {
        return (
          <>
            <Tooltip placement="bottom" title={value}>
              <span>
                {value.substr(0, 15) + '...'}
              </span>
            </Tooltip>
          </>
        )
      },
      key: 'desc'
    },
    {
      title: '操作',
      render: (value, row) => {
        return (
          <>
            <Button
              type='primary'
              onClick={
                () => {
                  delItem(row.id)
                }
              }
              danger size='small'>删除</Button>
            <Button onClick={
              () => {
                navigate(`/studyUpdate/${row.id}`)
              }
            } type='primary' size='small'>编辑</Button>
          </>
        )
      },
    },
  ]
  //获取学员名单
  const [students, setStudents] = useState([])
  // 列表分页数据
  const [total, setTotal] = useState(0);
  let page = 1;
  let pageSize = 10;
  // 修改了分页页码 一页多少条
  const pageChange = (_page, _pageSize) => {
    page = _page;
    pageSize = _pageSize;
    getNowStudy();
  }
  const getNowStudy = () => {
    fetchStudy({
      page,
      pageSize,
      ...searchParams
    }).then(res => {
      console.log(res);
      if (res.data.code === 200) {
        setStudents(res.data.data.lists)
        setTotal(res.data.data.total)
      }
    })
  }
  // 删除
  const delItem = (id) => {
    // 确认框删除
    Modal.confirm({
      title: '删除学员',
      content: '该操作会彻底删除学员信息,确定继续吗?',
      onOk: () => {
        studyDelete({ id }).then(res => {
          if (res.data.code === 200) {
            message.success(res.data.msg, 2, () => {
              navigate(0)
            })
          }
        })
      }
    })
  }
  useEffect(() => {
    getNowStudy()
  }, [])
  // 导出excel模板
  const exportFile = () => {
    // 导出excel模板
    exportExcelTpl([
      {
        学生姓名: '学生姓名',
        年龄: 10,
        学费: 1000,
        家长姓名: '家长姓名',
        备注: '这是备注',
        图片: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.E9AgG0B16h8QByxEhDUNCAHaHr?w=203&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7'
      }
    ], 'xxx表')
  }
  // 导入商品excel模板
  const uploadXlsx = async (file) => {
    writeExcel(file, el => {
      return {
        studyName: el.学生姓名,
        age: el.年龄,
        price: el.学费,
        parentName: el.家长姓名,
        desc: el.备注,
        icon: el.图片
      }
    }).then(data => {
      // 调用批量添加商品
      studAdd({
        items: data
      }).then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg, 2, () => {
            navigate(0)
          })
        }
      })
    })

  }
  return (
    <div className='endPage'>
      <SearchBar handleSearch={searchItem} />
      {/* 操作栏 */}
      <div style={{ margin: '15px 0' }}>
        <Button type='primary'
          onClick={
            () => {
              navigate('/studyAdd')
            }
          }
          className='addBut'
          icon={<FolderAddOutlined />}>新增学员</Button>
        <Button
          className='ExportOut'
          type='primary' onClick={
            exportFile
          } icon={<ExportOutlined />}>导出模板</Button>
        <Upload
          accept=".xlsx, .xls"
          action=''
          beforeUpload={(file) => {
            // 导入excel
            uploadXlsx(file)
            return false
          }}
        >
          <Button
            className='ImportOut'
            type='primary' icon={<ImportOutlined />}>批量导入</Button>
        </Upload>
      </div>
      {/* /操作栏 */}
      <Table rowKey='id' scroll={{
        y: 400
      }} dataSource={students} columns={columns}
        pagination={{
          defaultCurrent: page,
          defaultPageSize: pageSize,
          total: total,
          showQuickJumper: true,
          onChange: pageChange
        }}

      />
    </div>
  )
}
